<template>
  <a-card :bordered="false" style="height: 100%;">
    <a-spin :spinning="loading">
      <a-tree
        showLine
        checkable
        checkStrictly
        :expandedKeys.sync="expandedKeys"
        :checkedKeys="checkedKeys"
        :treeData="treeDataSource"
        @check="onCheck"
        :selectedKeys="selectedKeys"
        @select="handleTreeSelect"
      />
    </a-spin>
  </a-card>
</template>

<script>

  import { getAction } from '@/api/manage'
  import YchConstant from '@/api/YchConstant'

  export default {
    name: 'SelectDeptTree',
    props: {
      value: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        cardLoading: true,
        loading: false,
        treeDataSource: [],
        expandedKeys: [],
        selectedKeys: [],
        url: {
          queryDeptTreeList: YchConstant.PREFIX_BPM + '/bpm-back/processSelectRest/queryDeptTreeList/v1'
        }
      }
    },
    created() {
      this.queryTreeData()
    },
    computed: {
      checkedKeys() {
        const data = []
        this.value.forEach(item => {
          if (item.id.indexOf('#') != -1) {
            const parentId = item.id.substring(0, item.id.indexOf('#'))
            if (data.indexOf(parentId) == -1) {
              data.push(parentId)
            }
          } else {
            data.push(item.id)
          }
        })
        return {
          checked: data
        }
      }
    },
    methods: {
      queryDepartTreeList(params) {
        return getAction(this.url.queryDeptTreeList, params)
      },
      queryTreeData(keyword) {
        this.commonRequestThen(this.queryDepartTreeList({
          departName: keyword ? keyword : undefined
        }))
      },
      handleTreeSelect(selectedKeys, event) {
        this.selectedKeys = selectedKeys
        const title = event.node.dataRef.title
        const value = event.node.dataRef.value

        this.$emit('setSelectedDept', value, title)
      },
      onCheck(checkedKeys, e) {
        const oldKeys = this.checkedKeys.checked
        const data = this.value.filter(item => {
          let id = item.id
          if (id.indexOf('#') != -1) {
            id = id.substring(0, id.indexOf('#'))
          }
          return checkedKeys.checked.indexOf(id) != -1
        })//原来剩下的
        const addIds = checkedKeys.checked.filter(id => oldKeys.indexOf(id) == -1)//新增的

        let selectedNode = null
        e.checkedNodes.forEach(item => {
          if (addIds.indexOf(item.data.props.value) != -1) {
            const checkedData = {
              id: item.data.props.value,
              name: item.data.props.title
            }
            data.push(checkedData)
            selectedNode = checkedData
          }
        })
        this.$emit('input', data)

        //默认选中事件
        if (addIds.length > 0) {
          this.selectedKeys = [selectedNode.id]
          this.$emit('setSelectedDept', selectedNode.id, selectedNode.name)
        } else {
          this.selectedKeys = []
          this.$emit('setSelectedDept', null, null)
        }
      },
      commonRequestThen(promise) {
        this.loading = true
        promise.then(res => {
          if (res.success) {
            this.treeDataSource = res.result
            // 默认选中第一条数据、默认展开所有第一级
            if (this.treeDataSource.length > 0) {
              this.expandedKeys = res.result.map(item => item.key)
            } else {
              this.expandedKeys = []
            }
          } else {
            this.messageUtil.warning(this.$t('m.bpm.verify.zu-zhi-ji-gou-cha-xun-shi-bai') + res.message)
            console.error(res)
          }
        }).finally(() => {
          this.loading = false
        })
      }
    }
  }
</script>
